<template>
  <div class="course-task">
    <!-- 头部信息 -->
    <div class="task-top">
      <h2 title="2018级">2018级</h2>
    </div>

    <!-- 内容栏 -->
    <div class="content">
      <div class="hasList" v-if="dataList.length != 0">
        <list-item
          :dataList="dataList"
          :select="1"
          :timeShow="true"
          :signed="isSigned"
          @signPicClick="signClick"
          :types="'sign'"
        />
      </div>
      <div class="noList" v-else>暂无任务</div>

      <!-- 弹窗, 修改个人信息 -->
      <main-navbar-update-userinfo v-if="updateUserInfoVisible" ref="updateUserInfo"></main-navbar-update-userinfo>

      <!-- <div v-show="picShow" class="picSign">
        <img :src="previewImageSrc" />
        <div class="picSubmit">
          <input type="file" @change="displayImage" ref="fileInput" multiple="multiple" />
          <button class="fileSub" @click="btnClick">提交</button>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import ListItem from '@/components/content/List/ListItem';
import MainNavbarUpdateUserinfo from '@/views/main-navbar-update-userinfo';

export default {
  components: { ListItem, MainNavbarUpdateUserinfo },
  name: 'CourseTask',
  data() {
    return {
      dataList: [
        // { title: '手动签到', time: '3.5', class: 'sign', sign: 0 },
        // { title: '图片签到', time: '4.5', class: 'sign', sign: 0 },
      ],
      picShow: true,
      previewImageSrc: null,
      isSigned: false,
      updateUserInfoVisible: true,
    };
  },
  mounted() {
    this.previewImageSrc = '/src/assets/image/CourseProfile/avatar.png';
  },
  methods: {
    signClick(currentBool) {
      this.updateUserInfoVisible = currentBool;
    },

    //个人信息修改
    updateUserInfo() {
      this.updateUserInfoVisible = true;
      this.$nextTick(() => {
        this.$refs.updateUserInfo.init();
      });
    },

    btnClick() {
      this.isSigned = true;
    },

    displayImage() {
      const file = this.$refs.fileInput.files[0];
      const fr = new FileReader();
      fr.onload = (e) => {
        this.previewImageSrc = e.target.result;
      };
      fr.readAsDataURL(file);
      console.log(file);
    },
  },
};
</script>

<style scoped>
.course-task {
  position: relative;
  background-color: #fff;
  padding: 0 30px;
}
.task-top {
  padding: 19px 30px;
  border-bottom: 1px solid #f2f2f2;
}
.task-top h2 {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #181e33;
}
.content {
  margin-top: 8px;
}

.noList {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-34%, -50%);
  color: #a8a8b3;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 22px;
}
.picSign {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f2f4f7;
  box-shadow: 0 0 10px rgba(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.picSign img {
  height: 300px;
  width: 100%;
}
.picSign .picSubmit {
  display: flex;
  justify-content: space-between;
}
.picSign .picSubmit input[type='file'] {
  width: 73px;
}
.picSign .picSubmit .fileSub {
  width: 80px;
  border: 1px solid #a8a8b3;
}
</style>